<template>
    <div id="Family" v-if="data">
        <div class="family-main" >
            <div class="family-center980">
                <div class="family-future">
                    <h1>未来到家。</h1>
                    <p>
                        只要连上你常用的设备，就能把家变成智能、便捷，又充满乐趣的安乐窝。点点
                        iPhone
                        或动动嘴，就能操控灯光、门锁和恒温器；无论你人在哪里，都能在各个房间播放想听的歌。而且这一切，都在
                        Apple 周到的安全和隐私保护下进行。
                    </p>
                </div>
            </div>
        </div>
        <div class="fm-headimg">
            <div class="family-center1380">
                <div class="fm-headimg-box">
                    <div class="fm-headimg-1">
                        <div class="fm-headimg-1-flex">
                            <div class="fm-headimg-text">
                                <p>HomePod mini</p>
                                <h3>底气十足的声音，<br />响彻各个房间。</h3>
                                <p>RMB 749</p>
                                <div class="fm-head-buybox">
                                    <router-link to="/homepodMini">购买</router-link>
                                    <a href="">进一步了解 ></a>
                                </div>
                            </div>
                            <img :src="encodeImgUrl('room_filling_sound.jpg')" />
                        </div>
                    </div>

                    <div class="fm-headimg-1">
                        <div class="fm-headimg-1-flex">
                            <div class="fm-headimg-text-2">
                                <img :src="encodeImgUrl('home_icon.png')" />
                                <p>家庭</p>
                                <h3>你的家，由你指挥。</h3>
                                <div class="fm-head-buybox-2">
                                    <a>进一步了解 ></a>
                                </div>
                            </div>
                            <img
                                :src="encodeImgUrl('your_home_at_your_command.jpg')"
                                class="fm-2img"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="fm-gallery">
            <div class="family-center980">
                <h2 class="fm-gallery-titie">把家变智能，家家都有好理由。</h2>
            </div>
            <div class="fm-center1627">
                <ul class="fm-gallery-list">
                    <li>
                        <div class="fm-gallery-text">
                            <h4>
                                用手中常用的设备，<br />随时随地掌控你的家。
                            </h4>
                            <p><a>进一步了解家庭 app ></a></p>
                        </div>
                        <div class="fm-gallery-img">
                            <img :src="encodeImgUrl('control_your_home.jpg')" />
                        </div>
                    </li>

                    <li>
                        <div class="fm-gallery-text">
                            <h4>让快乐的声音在各个房间<br />互相传递</h4>
                            <p><router-link to="/homepodMini">进一步了解 HomePod mini ></router-link></p>
                        </div>
                        <div class="fm-gallery-img">
                            <img :src="encodeImgUrl('seemlessly_connected.jpg')" />
                        </div>
                    </li>

                    <li>
                        <div class="fm-gallery-text">
                            <h4>说一声，<br />让一切自动发生。</h4>
                            <p><router-link to="/homepodMini">进一步了解 HomePod mini ></router-link></p>
                        </div>
                        <div class="fm-gallery-lunbotext">
                            <!-- <p>嘿 Siri，设置<br>晚安场景</p> -->
                            <!-- <p>嘿 Siri，将家里的<br>空调设到 22 度</p> -->
                            <p>嘿 Siri，关掉<br />浴室的灯</p>
                        </div>
                    </li>

                    <li>
                        <div class="fm-gallery-text">
                            <h4>Apple 安全和隐私，<br />周到到家。</h4>
                            <p><a>进一步了解隐私 ></a></p>
                        </div>
                        <div class="fm-gallery-img">
                            <img :src="encodeImgUrl('security_and_privacy.jpg')" />
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="fm-other">
            <div class="fm-center1627">
                <div class="fm-other-head">
                    <h2>众多配件，可用在全家各处，<br />还可跨设备操控。</h2>
                    <!-- <a >选购配件 ></a> -->
                </div>
                <div class="fm-other-content">
                    <ul>
                        <li>
                            <h4>灯光照明</h4>
                            <p>
                                利用灯光和开关，安排生活作息，<br />营造心境氛围。
                            </p>
                            <!-- <a href="">选购照明产品和开关 ></a> -->
                            <img :src="encodeImgUrl('lighting.jpg')" />
                            <span>Nanoleaf Essentials A19 E27 灯泡</span>
                        </li>
                        <li>
                            <h4>安全性</h4>
                            <p>
                                利用摄像头和门铃等，<br />为你守望心中的挂念。
                            </p>
                            <!-- <a href="">选购摄像头和感应器 ></a> -->
                            <img :src="encodeImgUrl('security.jpg')" />
                            <span
                                >Logitech Circle View 安全摄像头<br />
                                (支持 Apple HomeKit)</span
                            >
                        </li>
                        <li>
                            <h4>舒适度</h4>
                            <p>
                                利用智能感应器，测量家中的空气质量、<br />温度和湿度水平。
                            </p>
                            <!-- <a href="">选购感应器 ></a> -->
                            <img :src="encodeImgUrl('comfort.jpg')" />
                            <span>Kaiterra Laser Egg 2 智能空气质量检测仪</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fm-musicAd">
            <div class="family-center1380">
                <div class="fm-musicAd-content">
                    <div class="fm-music-text">
                        <img :src="encodeImgUrl('apple_music_logo.png')" />
                        <h2>好歌数千万，<br />马上免费试听。</h2>
                        <div class="fm-music-aboutlink">
                            <a >免费试用* -></a>
                            <a >进一步了解 ></a>
                        </div>
                    </div>
                    <div class="fm-music-jayimg">
                        <img :src="encodeImgUrl('router_apple_music.jpg')" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-else>
        加载中。。。。。。
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            data: null,
        }
    },
    computed: {
        encodeImgUrl() {
            return function(imgName) {
                // console.log(this.data["room_filling_sound.jpg"])
                return this.imgBaseUrl + this.data[imgName];
            }
        }
    },
    methods: {
        getData() {
            let url = "http://localhost:3000/HYLImg";
            axios.get(url)
            .then(res=>{return res.data})
            .then(d=>{
                this.data = d;
                console.log(d)
            })
            // console.log(this.imgBaseUrl)
        }
    },
    mounted () {
        this.getData();
    },
};
</script>

<style lang="less" scoped>
#Family {
    width: 100%;
    height: 100%;
}
</style>
<style scoped src="../assets/css/family.css"></style>
